<template>
  <div class="container">
    <div class="header">
      <div class="toolbar">
        <div class="toolbar-link">
          <a class="hot-link" href="">北京</a>
          <a href="">[切换城市]</a>
          <i class="sep">|</i>
          <a href="">廊坊</a>
          <a href="">天津</a>
          <a href="">保定</a>
          <a href="">全国</a>
          <i class="sep">|</i>
          <i class="iconfont icon-mobile"></i>
          <a rel="nofollow" href="" class="dropdown-img">微信版</a>
        </div>
        <ul id="user-tools" class="navbar-nav">
          <li>
            <a href="" rel="nofollow" data-toggle="userAuth" data-type="reg"
              >注册</a
            >
          </li>
          <i class="sep">|</i>
          <li>
            <router-link to="/login">
              <a href="" rel="nofollow" data-toggle="userAuth" data-type="login"
                >登录</a
              ></router-link
            >
          </li>
          <i class="sep">|</i>
          <li class="dropdown">
            <a href="" target="_blank" rel="nofollow"
              >商户推广<i class="icon-arrow-down"></i
            ></a>
          </li>
          <i class="sep">|</i>
          <li>
            <a href="" target="_blank">联系客服</a>
          </li>
          <i class="sep">|</i>
          <li>
            <a href="" target="_blank" rel="nofollow">帮助</a>
          </li>
        </ul>
      </div>
      <div class="location">
        <span class="breadcrumb">
          <a href="/" property="v:title" rel="v:url" class="primary-logo"
            ><img
              alt="北京"
              src=""
              srcset="//s.baixing.net/img/refashion/logo2x/beijing.png 2x"
              class="city-logo"
            />
            <img
              alt="百姓网"
              src="//s.baixing.net/img/refashion/logo_baixing.png"
              width="95px"
              height="48px"
            />
          </a>
        </span>
        <div class="head-search">
          <form class="search">
            <input
              placeholder="找服务 找工作 找二手车"
              class="input-search"
              autocomplete="off"
            />
            <button class="search-button">
              <span class="search-icon"></span>
            </button>
          </form>
          <div class="newline">
            <a href="">司机</a><a href="">保安</a><a href="">销售</a
            ><a href="">物流</a><a href="">百货</a><a href="">金融</a
            ><a href="">市场</a><a href="">媒介</a><a href="">保洁</a
            ><a href="">电气</a><a href="">渔业</a><a href="">网络直播</a>
          </div>
        </div>
        <!-- <a href="" class="post">免费发布招聘信息</a> -->
        <!-- <a
          href=""
          onclick='tracker.evt("resume_fabu", {"src" : "logo_header", "type" : "base", "platform" : "web"});'
          class="post resume-btn"
          >免费发布简历</a
        > -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "headTop",
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="scss" scoped>
.container {
  height: 22%;
  .header {
    margin-top: 3px;
    height: 100%;
    .toolbar {
      min-width: 1200px;
      border-bottom: solid 1px #dedede;
      display: flex;
      a {
        color: rgb(230, 38, 38);
        color: inherit;
        padding: 0 5px;
        background-color: transparent;
        box-sizing: border-box;
        font-size: 12px;
        font-weight: 400;
        line-height: 36px;
      }
      a:hover {
        color: rgb(236, 9, 9);
      }
      ul li {
        display: inline;
        list-style-type: none;
        // padding: 5px 5px;
        margin-left: 5px;
      }
      .toolbar-link {
        width: 40%;
        .hot-link {
          color: rgb(236, 9, 9);
        }
        .sep {
          font-size: 10px;
        }
      }
      .navbar-nav {
        margin-left: 400px;
        .sep {
          font-size: 10px;
        }
      }
    }
  }
}
.location {
  min-width: 1000px;
  border: 1px solid rgb(175, 172, 172);
  // box-shadow: 0;
  padding: left 200px;
  display: flex;
  .head-search {
    margin-top: 25px;
    width: 485px;
    .search {
      vertical-align: middle;
      .input-search {
        vertical-align: middle;
        width: 395px;
        padding: 0 15px;
        margin: 0 0 0 -1px;
        height: 40px !important;
        line-height: 40px;
        border: 1px solid #ddd;
        font-size: 12px;
      }
      .search-button {
        vertical-align: middle;
        height: 41.98px;
        line-height: 40px;
        background: #fff;
        width: 48px;
        border: 1px solid #ddd;
        font-size: 16px;
        .search-icon {
          display: block;
          width: 15px;
          height: 15px;
          background: url(https://file.baixing.net/202105/8c476c9aa62c0f8d1fb53e27eb8cf15b.png);
          background-size: cover;
          margin: auto;
        }
      }
    }
  }
  .breadcrumb {
    .city-logo{
      margin-right: 5px;
    }
    margin-right: 100px;
    margin-left: 140px;
    height: 100px;
    line-height: 100px;
    padding-top: 15px;
  }
}
.newline {
  margin-top: 10px;
  overflow: hidden;
  height: 25px;
  font-size: 12px;
  color: #999;
  a {
    padding: 0 5px;
    display: inline-block;
    color: inherit;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 400;
    line-height: 10px;
    background-color: transparent;
  }
}
</style>